﻿<PageHeader BackIcon="true" Class="site-page-header">
    <PageHeaderTitle>Title</PageHeaderTitle>
    <PageHeaderSubtitle>This is a subtitle</PageHeaderSubtitle>
    <PageHeaderExtra>
        <Button>Operation</Button>
        <Button>Operation</Button>
        <Button Type="@ButtonType.Primary">Primary</Button>
    </PageHeaderExtra>
    <PageHeaderContent>
        <div class="pageheader-content">
            <div class="pageheader-main">
                <Descriptions Size="small" Column="2">
                    <DescriptionsItem Title="@("Created")" Span="1">Lili Qu</DescriptionsItem>
                    <DescriptionsItem Title="@("Association")" Span="1"><a>421421</a></DescriptionsItem>
                    <DescriptionsItem Title="@("Creation Time")" Span="1">2017-01-10</DescriptionsItem>
                    <DescriptionsItem Title="@("Effective Time")" Span="1">2017-10-10</DescriptionsItem>
                    <DescriptionsItem Title="@("Remarks")" Span="2">
                        Gonghu Road, Xihu District, Hangzhou, Zhejiang, China
                    </DescriptionsItem>
                </Descriptions>
            </div>
            <div class="pageheader-extra">
                <div>
                    <Statistic Title="@("Status")" Value=@("Pending")></Statistic>
                    <Statistic Title="@("Price")" Value="568.08" Prefix="@("$")" Style="margin: 0 32px"></Statistic>
                </div>
            </div>
        </div>
    </PageHeaderContent>
    <PageHeaderFooter>
        <Tabs DefaultActiveKey="1">
            <TabPane Key="1">
                <Tab>Details</Tab>
            </TabPane>
            <TabPane Key="2">
                <Tab>Rule</Tab>
            </TabPane>
        </Tabs>
    </PageHeaderFooter>
</PageHeader>

<style>
    .pageheader-content {
        display: flex;
    }

    .pageheader-extra div {
        display: flex;
        width: max-content;
        justify-content: flex-end;
    }

    @@media (max-width: 576px) {
        .pageheader-content {
            display: block;
        }

        .pageheader-main {
            width: 100%;
            margin-bottom: 12px;
        }

        .pageheader-extra {
            width: 100%;
            margin-left: 0;
            text-align: left;
        }
    }
</style>